import React from "react";
import Chart from "echarts-for-react";
import style from "./Top3.less";
class Top3 extends React.Component {
  
  
       
    setOption = () => {
        return {
            backgroundColor:'#ffffff',
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                    color: '#fafafa'
                }
        
            },
            title: {
                text: '重点设备/点位报警类型排名',
                right:'center'
             
            },
            legend: {
                top:20,
                data: ['普通报警', '重要报警']
            },
          
            grid: {
                left: 80,
                right:50
            },
            calculable: true,
            yAxis: {
                type: 'category',
                data: ['窖尾温度', '窖体压力', '高温氧化器温度', '压缩空气压力', '换热器空气进出口温度', '天然气压力', '引风机压力', 
                '布袋除尘进出口压力'],
                axisLabel: {
                    interval: 0, //标签设置为全部显示
                    formatter: function(params) {
                        var newParamsName = "";// 最终拼接成的字符串
                        var paramsNameNumber = params.length;// 实际标签的个数
                        var provideNumber = 6;// 每行能显示的字的个数
                        var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                        /**
                         * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                         */
                        // 条件等同于rowNumber>1
                        if (paramsNameNumber > provideNumber) {
                            /** 循环每一行,p表示行 */
                            for (var p = 0; p < rowNumber; p++) {
                                var tempStr = "";// 表示每一次截取的字符串
                                var start = p * provideNumber;// 开始截取的位置
                                var end = start + provideNumber;// 结束截取的位置
                                // 此处特殊处理最后一行的索引值
                                if (p == rowNumber - 1) {
                                    // 最后一次不换行
                                    tempStr = params.substring(start, paramsNameNumber);
                                } else {
                                    // 每一次拼接字符串并换行
                                    tempStr = params.substring(start, end) + "\n";
                                }
                                newParamsName += tempStr;// 最终拼成的字符串
                            }
                    
                        } else {
                            // 将旧标签的值赋给新标签
                            newParamsName = params;
                        }
                        //将最终的字符串返回
                        return newParamsName
                    }
                }
            },
            xAxis: [{
                name: '数量',
                type: 'value'
            }],
        
            series: [
                {
                    name: '普通报警',
                    type: 'bar',
                    stack: '总量',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'inside'
                            },
                            color: '#2EC2FF'
                        }
                    },
                    data:this.props.tu3.putong
                },
                {
                    name: '重要报警',
                    type: 'bar',
                    stack: '总量',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'inside'
                            },
                            color: '#294972'
                        }
                    },
                    data:this.props.tu3.zhongyao
                }
        
            ]
        }

        }
        
      
  

    render() {
        console.log(this.props)
        return (
          
               
               
                <div id="main3" className={style.main3} >
                <Chart option={this.setOption()} notMerge lazyUpdate />
                </div>
          
        );
    }
}

export default Top3;
